<script setup>
import { getAllPermissionAPI, addOrUpdatePermissionAPI, removePermissionAPI } from '@/api/acl/menu'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

// 存储菜单数据
const permissionArr = ref([])

// 拉取菜单数据方法
const getAllPermission = async () => {
  let res = await getAllPermissionAPI()
  if(res.code === 200) {
    permissionArr.value = res.data
  }
}

getAllPermission()

// 控制对话框显隐
const dialogVisiable = ref(false)

// 携带的参数
const menuData = ref({
  id: 0,
  code: '',
  level: 0,
  name: '',
  pid: 0
})

// 添加按钮回调
const addPermission = (row) => {
  // 清空数据
  Object.assign(menuData.value, {
    id: 0,
    code: '',
    level: 0,
    name: '',
    pid: 0
  })
  dialogVisiable.value = true
  // 收集新增菜单的level, 因为是子菜单，所以level + 1
  menuData.value.level = row.level + 1
  // 新增给谁
  menuData.value.pid = row.id
}

// 编辑按钮的回调
const updatePermission = (row) => {
  dialogVisiable.value = true
  Object.assign(menuData.value, row)
}

// 确定按钮的回调
const save = async () => {
  let res = await addOrUpdatePermissionAPI(menuData.value)
  if(res.code === 200) {
    dialogVisiable.value = false
    ElMessage({type: 'success', message: menuData.value.id ? '修改成功' : '添加成功'})
    getAllPermission()
  }
}

// 删除菜单按钮回调
const removePermission = async (id) => {
  let res = await removePermissionAPI(id)
  if(res.code === 200) {
    ElMessage({type: 'success', message: '删除成功'})
    getAllPermission()
  }
}
</script>

<template>
  <div>
    <el-table border row-key="id" :data="permissionArr">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" size="default" :disabled="row.level === 4" @click="addPermission(row)" v-has="`btn.Permission.add`">{{row.level === 3 ? '添加功能' : '添加菜单'}}</el-button>
          <el-button type="primary" size="default" :disabled="row.level === 1" @click="updatePermission(row)">编辑</el-button>
          <el-popconfirm
          :title="`你确定要删除${row.name}吗?`"
          @confirm="removePermission(row.id)"
          width="200px">
          <template #reference><el-button type="primary" size="default" :disabled="row.level === 1">删除</el-button></template>
          </el-popconfirm>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog：添加与编辑菜单 -->
    <el-dialog
    :title="menuData.id ? '更新菜单' : '添加菜单'"
    v-model="dialogVisiable"
    width="30%"
    :align-center="true">
      <el-form label-width="80px" style="margin: 30px 0;">
        <el-form-item label="名称">
          <el-input v-model="menuData.name" placeholder="请输入菜单名称"  clearable />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="menuData.code" placeholder="请输入权限值"  clearable />
        </el-form-item>
      </el-form>
    <template #footer>
    <span>
      <el-button @click="dialogVisiable = false">取消</el-button>
      <el-button type="primary" @click="save">确认</el-button>
    </span>
    </template>
    </el-dialog>
    
  </div>
</template>

<style scoped></style>
